<template>
  <div class="">
    <a-modal
      v-model:visible="dialogVisible"
      :title="dialogTitle"
      :modal-style="modalStyle"
      :body-style="bodyStyle"
      :mask-closable="false"
      @cancel="dialogCancel"
      @before-ok="dialogBeforeOk"
    >
      <a-table
        row-key="id"
        :loading="loading"
        :pagination="false"
        :data="renderData"
        :bordered="{ wrapper: true, cell: true }"
        :scroll="tableScroll"
        column-resizable
      >
        <template #columns>
          <a-table-column title="序号" data-index="id" align="center" :width="70"/>
          <a-table-column title="字段名称" data-index="column_name" :width="160"/>
          <a-table-column title="字段类型" data-index="column_type" align="center" :width="160"/>
          <a-table-column title="是否为空" data-index="is_nullable" align="center" :width="100"/>
          <a-table-column title="字段注释" data-index="column_comment" align="center" :ellipsis="true" :tooltip="true" :width="200"/>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  import useLoading from '@/hooks/loading';
  import screenHeight from '@/utils/screen-height';
  import { apiView } from '@/api/database';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    id: {
      type: [Number, String],
      default: '',
    },
  });

  const { loading, setLoading } = useLoading(true);
  const height = screenHeight(560);
  const renderData = ref<any>([]);
  const modalStyle = {
    width: '70%',
    height: '65%',
  };
  const bodyStyle = {
    height: 'calc(100% - 108px)',
    overflow: 'auto',
  };
  const tableScroll = ref({
    x: '100%',
    y: height,
  });

  const dialogVisible = ref(false);
  const dialogTitle = ref();

  const fetchData = async (row?: any) => {
    dialogVisible.value = true;
    dialogTitle.value = '表结构';

    if (row) {
      setLoading(true);
      try {
        const { data } = await apiView({ table: row.name });
        renderData.value = data.data;
      } catch (err) {
        // you can report use errorHandler or other
      } finally {
        setLoading(false);
      }
    }
  };

  const dialogCancel = () => {
    dialogVisible.value = false;
  };
  const dialogBeforeOk = (done: any) => {

  };

  // 暴露方法【给父级调用】
  defineExpose({
    fetchData,
  });
</script>

<style scoped lang="less">

</style>
